<template>
<div class="app-container">
    <el-row>
        <el-col :span="4">
            <el-card>
                <el-input v-model="filterText" placeholder="漏洞类别\CWE编号" style="margin-bottom:30px;" />

                <el-tree ref="tree2" :data="data2" :props="defaultProps" node-key="id" :filter-node-method="filterNode" class="filter-tree" default-expand-all @node-click="refreshData" />
            </el-card>
        </el-col>

        <el-col :span="20">
            <el-card>
                <div id="map-container"></div>
            </el-card>
        </el-col>
    </el-row>

</div>
</template>

<script>
import G6, {
    registerNode
} from '@antv/g6';
export default {

    data() {
        return {
            filterText: '',
            url: [
                'https://gw.alipayobjects.com/os/basement_prod/da5a1b47-37d6-44d7-8d10-f3e046dabf82.json',
                'https://gw.alipayobjects.com/os/basement_prod/0b9730ff-0850-46ff-84d0-1d4afecd43e6.json',
                'https://gw.alipayobjects.com/os/bmw-prod/f1565312-d537-4231-adf5-81cb1cd3a0e8.json',
            ],
            data2: [{
                id: 1,
                label: '越界写入',
                children: [{
                        id: 4,
                        label: '2000~2005年',
                        children: [{
                                id: 9,
                                label: 'CVE-2019-9011',
                            }, {
                                id: 10,
                                label: 'CVE-2019-9011'
                            },
                            {
                                id: 11,
                                label: 'CVE-2019-9011'
                            },
                        ]
                    },
                    {
                        id: 12,
                        label: '2006-2010年',
                        children: [{
                                id: 13,
                                label: 'CVE-2019-9011',
                            }, {
                                id: 14,
                                label: 'CVE-2019-9011'
                            },
                            {
                                id: 15,
                                label: 'CVE-2019-9011'
                            },
                        ]
                    },
                    {
                        id: 16,
                        label: '2011-2015年',
                        children: [{
                                id: 17,
                                label: 'CVE-2013-9011',
                            }, {
                                id: 18,
                                label: 'CVE-2012-9011'
                            },
                            {
                                id: 19,
                                label: 'CVE-2012-9011'
                            },
                        ]
                    }
                ]
            }, {
                id: 2,
                label: '跨站脚本',
                children: [{
                    id: 5,
                    label: 'Level two 2-1'
                }, {
                    id: 6,
                    label: 'Level two 2-2'
                }]
            }, {
                id: 3,
                label: '越界读取',
                children: [{
                    id: 7,
                    label: 'Level two 3-1'
                }, {
                    id: 8,
                    label: 'Level two 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            graph: {},
            initdata: {},
            testData1: {
                nodes: [{
                        id: 'cveID',
                        size: 150,
                        x:0,
                        y:0,
                        style: {
                            fill: '#59c4e6',
                        },
                        label: 'CVE-2016-4432',
                        labelCfg: {
                            fill: "#d1c2d3"
                        },
                    },
                    {
                        id: 'cweID',
                        label: 'CWE-287',
                        size: 100,
                        x:0,
                        y:0,
                        style: {
                            fill: '#edafda',
                        },
                    },
                    {
                        id: 'influcenceVersion1',
                        label: '6.0.0',
                        style: {
                            fill: '#93b7e3',
                        }
                    },
                    {
                        id: 'influcenceVersion2',
                        label: '6.0.1',
                        style: {
                            fill: '#93b7e3',
                        }
                    },
                    {
                        id: 'influcenceVersion3',
                        label: '6.0.2',
                        style: {
                            fill: '#93b7e3',
                        }
                    },
                    {
                        id: 'componentName',
                        label: 'Qpid_java',
                        style: {
                            fill: '#a5e7f0',
                        }
                    },
                    {
                        id: 'support',
                        label: 'Apache',
                        style: {
                            fill: '#cbb0e3',
                        }
                    },
                    {
                        id: 'repair',
                        label: 'Repair',
                        style: {
                            fill: '#cbb0e3',
                        }
                    },
                    {
                        id: 'cvssScore',
                        label: 'CVSS:5.0',
                        style: {
                            fill: '#cbb0e3',
                        }
                    }
                ],
                edges: [{
                        id: '1',
                        source: 'cveID',
                        target: 'cweID', // 目标点 id 
                    },
                    {
                        id: '2',
                        source: 'cveID',
                        target: 'cvssScore', // 目标点 id 
                    },
                    {
                        id: '3',
                        source: 'cveID',
                        target: 'repair',
                    },
                    {
                        id: '4',
                        source: 'cveID',
                        target: 'influcenceVersion1',
                    },
                    {
                        id: '5',
                        source: 'cveID',
                        target: 'influcenceVersion2',
                    },

                    {
                        id: '6',
                        source: 'cveID',
                        target: 'influcenceVersion3',
                    },
                    {
                        id: '7',
                        source: 'influcenceVersion1',
                        target: 'componentName',
                    },
                    {
                        id: '8',
                        source: 'influcenceVersion2',
                        target: 'componentName',
                    },
                    {
                        id: '9',
                        source: 'influcenceVersion3',
                        target: 'componentName',
                    },
                    {
                        id: '10',
                        source: 'componentName',
                        target: 'support',
                    },

                ],

            }
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree2.filter(val)
        }
    },
    mounted() {
        this.initG6();
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        initG6() {
            //网格插件
            const grid = new G6.Grid();

            const graph = new G6.Graph({
                container: 'map-container',
                width: window.innerWidth,
                height: window.innerHeight,
                layout: {
                    type: 'force',
                    width: 800,
                    height: 600,
                },
  
                fitViewPadding: [10,10,10,10],

                defaultNode: {
                    type: 'circle',
                    size: 50,
                },

                defaultEdge: {
                    type: 'poliline',
                    style: {
                        radius: 10,
                        lineWidth: 2,
                        offset: 30,
                        endArrow: true,
                    },
                },

                //插件
                plugins: [],
                enabledStack: true,

                //交互
                modes: {
                    default: ['drag-node', 'drag-canvas', 'zoom-canvas', 'brush-select', 'click-select'],
                }
            });

            graph.data(this.testData1);
            graph.render();

            //将graph设为全局变量
            //Notice:因为需要向子组件传递graph实例，但是graph实例需要在Component挂载之后才能获得g6容器，所以先置空一个graph:{},传递给子组件；
            this.graph = graph;

        },

        fetchData(url) {
            this.initdata = {};
            this.graph.render();
            fetch(url).then((res) => res.json()).then((data) => {
                data.nodes.forEach((node) => {
                    node.label = node.olabel;
                    node.degree = 0;
                    data.edges.forEach((edge) => {
                        if (edge.source === node.id || edge.target === node.id) {
                            node.degree++;
                        }
                    });
                });
                this.initData = data;
                this.graph.changeData(this.initData);
            });
        },
        getCheckedKeys() {
            console.log(this.$refs.tree.getCheckedKeys());
        },
        refreshData(data, node, el) {
            let id = data.id;
            if (id === 9) {
                this.fetchData(this.url[0]);
            } else if (id === 10) {
                this.fetchData(this.url[1]);
            } else {
                this.fetchData(this.url[2]);
            }
        }
    },
}
</script>

<style scoped>
.el-card {
    margin: 10px;
    height: 1000px;
}
</style>
